<script setup>
import {ref,onMounted} from 'vue'
import WOW from 'wow.js'
import risk1 from '@/assets/images/risk1.png';
import risk2 from '@/assets/images/risk2.png';
import risk3 from '@/assets/images/risk3.png';
import risk4 from '@/assets/images/risk4.png';
let n = ref(0);
let joinlist = ref();
let aboutlist = ref();

onMounted(async()=>{
 var wow = new WOW({
    boxClass: 'wow', // 需要执行动画的元素的 class; 【String类型】默认值：‘wow'；
    animateClass: 'animated', // animation.css 动画的 class; 【String类型】默认值：‘animated'；
    offset: 0, // 距离可视区域多少开始执行动画；【整数Number类型】默认值：0；
    mobile: true, // 是否在移动设备上执行动画；【Boolean类型】默认值: true;
    live: true // 异步加载的内容是否有效；【Boolean类型】默认值: true;
    });
 wow.init();

})

function action(i) {
    n.value = i
}

// const items1 = [
//     { id: 1, image:require('../../assets/images/risk1.png'), text: '保险合同注基本要素 >', jump: '/riskdec/p1' },
//     { id: 2, image:require('../../assets/images/risk2.png'), text: '可能面临的保险合同风险 >', jump: '/riskdec/p2'}
// ];
// const items2 = [
//     { id: 1, image:require('../../assets/images/risk3.png'), text: '其他有关保险合同纠纷 >', jump: '/riskdec/p3' },
//     { id: 2, image:require('../../assets/images/risk4.png'), text: '程序问题 >', jump: '/riskdec/p4' }
// ];
const items1 = [
    { id: 1, image:risk1 , text: '保险合同注基本要素 >', jump: '/riskdec/p1' },
    { id: 2, image:risk2, text: '可能面临的保险合同风险 >', jump: '/riskdec/p2'}
];
const items2 = [
    { id: 1, image:risk3, text: '其他有关保险合同纠纷 >', jump: '/riskdec/p3' },
    { id: 2, image:risk4, text: '程序问题 >', jump: '/riskdec/p4' }
];
</script>

<template>
    <div class="container">
        <div class="bgih5 wow fadeInDown">
                <h3 class="about-title wow fadeInDown">作为消费者, <br>这些事需要注意。</h3>
        </div>
        <div class="container4 wow fadeInUp">
            <div class="row">
                <div class="card" v-for="(item, index) in items1" :key="index">
                    
                    <router-link :to="item.jump">
                        <div class="cardin">
                            <img :src="item.image" alt="Section Image" />
                            <p>{{ item.text }}</p>
                        </div>
                        
                    </router-link>
                    
                </div>
            </div>
            <div class="row">
                <div class="card" v-for="(item, index) in items2" :key="index">
                    <router-link :to="item.jump">
                        <div class="cardin">
                            <img :src="item.image" alt="Section Image" />
                            <p>{{ item.text }}</p>
                        </div>
                        
                    </router-link>
                    
                </div>
            </div>
            <!-- <div class="card" v-for="(item, index) in items" :key="index">
            <img :src="item.image" alt="Section Image" />
            <p>{{ item.text }}</p>
            </div> -->
      
        </div>
    </div>
    
</template>
    
  
  
  <style scoped>
  .bgih5 {
    height: 380px;
    width: 100%;
    /* object-fit: cover; */
    background-image: url(@/assets/images/head3.png);
    background-repeat: no-repeat;
    background-size: cover;  
    position: relative; /* 让文字相对于容器定位 */
    color: white; /* 设置文字颜色 */
    text-align: left; 
    padding-left: 10%;
    display: block;
    padding-top: 80px;
    z-index: -1;
    /* align-items: center;  */
}
  .container4 {
    left: 86px;
    top: 96px;
    width: 95%;
    height: 832px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
    margin: -50px auto 50px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    padding: 20px;
  }
  .row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.card {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  /* font-size: 20px;
  font-family: 'iconfont logo'; */
}

.cardin {

  font-size: 26px;
  font-family: 'iconfont logo';
  align-items: center;
  text-align: center;
}
.cardin img{
  max-width: 100%;
  height: auto;
  margin:20px auto 20px auto;

}
  /* .card {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.card img {
  max-width: 90%;
  height: auto;
  margin-bottom: 10px;
} */
</style>
  
